<template>
  <div class="app-tanchu" >
    <div class="app-kuang" >
      <div>弹出框</div>
      <div>内容</div>
      <div>
        <button @click="OKfn">确定</button> <button @click="OKfn">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  prop: ["isShow"],
  data() {},
  methods: {
    OKfn() {
      //   this.$parent.setData();
      this.$parent.isShow = false;
    },
  },
};
</script>

<style scoped>
.app-tanchu {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.app-kuang {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
}

.donghua {
  animation: dh 2s linear;
}

.tanchudonghua {
  animation: hd 2s linear;
}

@keyframes hd {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.25;
  }

  75% {
    opacity: 0.1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dh {
  0% {
    width: 200px;
    height: 200px;
  }

  50% {
    width: 250px;
    height: 250px;
  }

  75% {
    width: 300px;
    height: 300px;
  }

  100% {
    width: 350px;
    height: 350px;
  }
}
</style>